<template>
  <v-layout class="release-container" justify-start align-start wrap>
    <v-flex md12 text-xs-left>
      <v-btn flat round @click="$router.go(-1)">
        <ui-icon icon="angle-left fa-lg"></ui-icon>
        <div class="ml-2">返回</div>
      </v-btn>
    </v-flex>
    <v-flex md6 pt-4>
      <v-layout justify-start align-center wrap px-5>
        <v-flex md12 d-flex align-center justify-start>
          <!-- 充值金额 -->
          <v-flex md4>
            <span class="subTitle title-color">角色名称</span>
          </v-flex>

          <v-flex md8>
            <v-text-field type="text" v-model="role.groupName" solo></v-text-field>
          </v-flex>
        </v-flex>

        <v-flex md12 d-flex align-center justify-start mt-3>
          <v-flex md4>
            <span class="subTitle title-color">角色状态</span>
          </v-flex>

          <v-flex md8>
            <v-radio-group v-model="role.isValid" :column="false">
              <v-radio
                :label="item.text"
                :value="item.value"
                color="primary"
                v-for="(item, i) in roleStatus"
                :key="i"
              ></v-radio>
            </v-radio-group>
          </v-flex>
        </v-flex>
        <v-flex md12 d-flex align-center justify-start mt-3>
          <v-flex md4>
            <span class="subTitle title-color">角色类型</span>
          </v-flex>

          <v-flex md8>
            <v-radio-group :column="false" v-model="role.sysGroup">
              <v-radio
                :label="item.text"
                :value="item.value"
                color="primary"
                v-for="(item, i) in roleTypes"
                :key="i"
              ></v-radio>
            </v-radio-group>
          </v-flex>
        </v-flex>
        <v-flex md12 d-flex align-center justify-start mt-3>
          <v-flex md4>
            <span class="subTitle title-color">角色描述</span>
          </v-flex>

          <v-flex md8>
            <v-textarea v-model="role.remark" type="text" solo></v-textarea>
          </v-flex>
        </v-flex>

        <v-layout v-if="role.sysGroup === CONSOLE" md12 align-center justify-space-between wrap>
          <v-flex md12>
            <v-checkbox
              :input-value="all"
              :indeterminate="indeterminate"
              label="全选"
              color="primary"
              hide-details
              @click.stop="toggleAll"
            ></v-checkbox>
          </v-flex>
          <v-flex md12>
            <v-layout md12 wrap v-for="(item, i) of consoleMenu" :key="item.name">
              <v-flex md12>
                <v-checkbox
                  :input-value="item.selected"
                  :indeterminate="item.indeterminate"
                  :label="item.name"
                  color="primary"
                  hide-details
                  @click.stop="toggleRow(item, i)"
                ></v-checkbox>
              </v-flex>
              <v-flex md12 pl-5>
                <v-layout wrap>
                  <v-flex md3 v-for="(subItem, j) of item.children" :key="subItem.name">
                    <v-checkbox
                      @click.stop="toggleSingle(item, subItem, i, j)"
                      :input-value="subItem.selected"
                      :label="subItem.name"
                      color="primary"
                      hide-details
                    ></v-checkbox>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>

        <v-layout v-if="role.sysGroup === SELLER" md12 align-center justify-space-between wrap>
          <v-layout wrap>
            <v-flex md3 v-for="(item, i) of sellerMenu" :key="item.name">
              <v-checkbox
                @click.stop="toggleSingleSeller(item, i)"
                :input-value="item.selected"
                :label="item.name"
                color="primary"
                hide-details
              ></v-checkbox>
            </v-flex>
          </v-layout>
        </v-layout>

        <v-flex md12 mt-4 d-flex align-center justify-center>
          <v-flex md4>
            <v-btn large round color="primary" @click="onSave">
              <span class="title">保存</span>
            </v-btn>
          </v-flex>
        </v-flex>
      </v-layout>
    </v-flex>
  </v-layout>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { KV } from "@/utils/type";
import { Todo, Admin } from "@/api";
declare const $Vue: Vue;
import { extendRoutes, fullRoutes } from "@/routes/routes";
import {

  buildMenu,
  buildMenuConsole,
  buildMenuSeller
} from "@/utils/commonUtils";
import { SysUserGroup, SetUpVo } from "@/api/bean";
import { UserTypeKV } from "@/utils/constants";

const CONSOLE = 1;
const SELLER = 0;
const menuRoutes: any = [{
  id: 10000,
  name: '待办事项',
}, {
  id: 20000,
  name: '内容管理',
}, {
  id: 30000,
  name: '用户管理',
}, {
  id: 40000,
  name: '系统设置',
}, {
  id: 50000,
  name: '管理员',
}];
@Component
export default class AddRole extends Vue {

  private CONSOLE = CONSOLE;
  private SELLER = SELLER;

  private roleTypes: Array<KV> = [
    {
      text: "系统角色",
      value: CONSOLE
    },
    {
      text: "商户角色",
      value: SELLER
    }
  ];

  private roleStatus: Array<KV> = [
    {
      text: "启用",
      value: 1
    },
    {
      text: "禁用",
      value: 2
    }
  ];

  private role: any = {
    remark: "",
    groupName: "",
    sysGroup: CONSOLE,
    isValid: 1
  };

  private type: string = "add";

  private consoleMenu: Array<any> = [];
  private sellerMenu: Array<any> = [];

  // 全选框的
  private all: boolean = false;
  private indeterminate: boolean = false;

  protected mounted() {
    let params: any = this.$route.params;
    this.type = params.type;
    if (this.type === "add") {
    } else if (this.type === "modify") {
      this.role = params.role;
      // this.queryRoleAuthority(this.role.groupId);
    }
    // this.consoleMenu = buildMenuConsole(menuRoutes, extendRoutes);

    this.getMenuList(CONSOLE);
    this.getMenuList(SELLER);
  }

  /**
   * 建立展示列表
   */
  private build(consoleMenu: Array<any>): Array<any> {
    let menuList: Array<any> = [];
    consoleMenu.forEach((item: any) => {
      item.children.forEach((subItem: any) => {
        if (subItem.selected) {
          menuList.push(subItem);
        }
      });
    });
    return menuList;
  }

  /**
   * 构建作为设置的列表
   */
  private buildMenuParam(consoleMenu: Array<any>): Array<any> {
    let menuList: Array<any> = [];
    consoleMenu.forEach((item: any) => {
      item.children.forEach((subItem: any) => {
        if (subItem.selected) {
          menuList.push(subItem.id);
        }
      });
    });
    return menuList;
  }

  /**
   * 构建作为设置的列表
   */
  private buildMenuParamSeller(menu: Array<any>): Array<any> {
    let menuList: Array<any> = [];
    menu.forEach((item: any) => {
      menuList.push(item.id);
    });
    return menuList;
  }

  // 切换全选
  private toggleAll() {
    this.indeterminate = false;
    this.all = !this.all;
    this.consoleMenu.forEach((item: any) => {
      item.selected = this.all;
      item.children.forEach((subItem: any) => {
        subItem.selected = this.all;
      });
    });
  }

  private toggleRow(item: any, i: number) {
    item.indeterminate = false;
    item.selected = !item.selected;
    item.children.forEach((subItem: any) => {
      subItem.selected = item.selected;
    });
    this.$set(this.consoleMenu, i, item);
  }

  private toggleSingle(item: any, subItem: any, i: number, j: number) {
    subItem.selected = !subItem.selected;
    item[j] = subItem;
    let selnum = 0;
    item.children.forEach((single: any) => {
      if (single.selected) {
        selnum++;
      }
    });
    if (selnum === 0) {
      item.selected = false;
      item.indeterminate = false;
    } else if (selnum === item.children.length) {
      item.selected = true;
      item.indeterminate = false;
    } else {
      item.selected = true;
      item.indeterminate = true;
    }
    this.$set(this.consoleMenu, i, item);
  }

  private toggleSingleSeller(item: any, i: number) {
    item.selected = !item.selected;
  }

  /**
   * 处理获取到已有权限列表后的显示
   */
  private handleRoleAuthority(data: any) {}

  private validate(): boolean {
    let pass = true;

    return pass;
  }

  private onSave() {
    let menuList = this.build(this.consoleMenu);
    if (this.validate()) {
      if (this.type === "add") {
        this.addRole();
      } else {
        this.modifyRole();
      }
    }
  }

  private async addRole() {
    const params: SysUserGroup = {
      isValid: this.role.isValid,
      groupName: this.role.groupName,
      remark: this.role.remark,
      sysGroup: this.role.sysGroup
    };
    const { data } = await Admin.addRole.r(params);
    console.log("addRole", data);
    if (data.result === 0) {
      let groupId = data.data.groupId;
      this.setupRoleAuthority(groupId, this.role.sysGroup);
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  private async modifyRole() {
    const params: SysUserGroup = {
      groupId: this.role.groupId,
      isValid: this.role.isValid,
      groupName: this.role.groupName,
      remark: this.role.remark,
      sysGroup: this.role.sysGroup
    };;
    const { data } = await Admin.addRole.r(params);
    console.log("modifyRole", data);
    if (data.result === 0) {
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 获取权限菜单列表
   */
  private async getMenuList(sysGroup: number) {
    const params = {
      sysGroup
    };
    const { data } = await Admin.getMenuList.r(params);
    console.log("getMenuList", data);
    if (data.result === 0) {
      // 得到完整路由表
      if (sysGroup === CONSOLE) {
        this.consoleMenu = buildMenuConsole(menuRoutes.slice(), data.data);
      } else if (sysGroup === SELLER){
        this.sellerMenu = buildMenuSeller(data.data);
      }
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 获取权限菜单列表
   */
  private async queryRoleAuthority(groupId: number) {
    const params = {
      groupId
    };
    const { data } = await Admin.queryRoleAuthority.r(params);
    console.log("queryRoleAuthority", data);
    if (data.result === 0) {
      if (data.data) {
        this.handleRoleAuthority(data.data);
      }
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 设置角色权限菜单
   */
  private async setupRoleAuthority(groupId: number, sysGroup: number) {

    let menuList = sysGroup === CONSOLE ? this.buildMenuParam(this.consoleMenu) : this.buildMenuParamSeller(this.sellerMenu);
    const params: SetUpVo = {
      groupId,
      menuList,
    };
    const { data } = await Admin.setRoleAuthority.r(params);
    console.log("modifyRole", data);
    if (data.result === 0) {
      $Vue.$emit("snackbar", {
        message: '设置成功'
      });
      this.$router.go(-1);
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
}
</script>

<style lang="less" scoped>
</style>


